{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div class="container">
  <ol class="breadcrumb">
      <li><a href="{:url('index/index')}">演示首页</a></li>
      <li>图片剪切</li>
  </ol>
<section class="demo-section">
<div id="pageContent">
<style>
.img-cutter-info {margin-bottom: 10px}
</style>






<article><p>通过本插件允许用户通过拖拽区域边框来选定裁剪区域。</p><div class="alert alert-warning">
  <h4>提示</h4>
  <p>为兼容更多的浏览器，此插件实际并不会对图片进行剪裁操作。当确定裁剪区域后，你需要将剪裁区域数据上传到服务器，让服务器进行图片裁剪操作。</p>
  <p>你仍然可以通过监听<code>before</code>事件来自行处理确定裁剪区域后的操作，包括在本地对图片进行剪裁。</p>
</div><div class="alert alert-danger">
  <h4>兼容性问题</h4>
  <ul>
    <li>在 IE8-9 上有兼容性问题；</li>
    <li>在触摸屏上无法进行拖拽功能；</li>
    <li>在小屏幕上无法获得最佳体验。</li>
  </ul>
</div></article>








<section><header><h3>综合示例</h3></header><article><h4>引入资源</h4><p>图片剪切为独立组件，你需要从本地或 CDN 单独引入 lib 目录下的资源：</p><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="tag">&lt;link</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"lib/imgcutter/zui.imgcutter.min.css"</span><span class="pln"> </span><span class="atn">rel</span><span class="pun">=</span><span class="atv">"stylesheet"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"lib/imgcutter/zui.imgcutter.min.js"</span><span class="tag">&gt;&lt;/script&gt;</span></code></pre><h4>示例</h4><div class="example">
  <div class="img-cutter fixed-ratio" id="imgCutter">
    <div class="canvas"><img src="__IMG__/320x320icon.png" alt=""><div class="cover" style="background: #000; opacity: 0.6; filter:alpha(opacity=60);"></div><div class="controller" style="left: 453px; top: 102px; width: 128px; height: 128px;"><div class="control" data-direction="top"></div><div class="control" data-direction="right"></div><div class="control" data-direction="bottom"></div><div class="control" data-direction="left"></div><div class="control" data-direction="top-left"></div><div class="control" data-direction="top-right"></div><div class="control" data-direction="bottom-left"></div><div class="control" data-direction="bottom-right"></div></div><div class="cliper" style="clip: rect(102px, 581px, 230px, 453px);"><img src="__IMG__/320x320icon.png"></div></div>
    <div class="actions">
      <h5>拖拽来剪切图片</h5>
      <div class="img-cutter-info small">宽度：128px，高度：128px，上边：102px，下边：230px，左边：453px，右边：581px</div>
      <button type="button" class="btn btn-primary img-cutter-submit">确认</button>
    </div>
  </div>
</div><pre class="prettyprint prettyprinted" style=""><code class="lang-html"><span class="com">&lt;!-- HTML结构 --&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"img-cutter"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"imgCutter"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"canvas"</span><span class="tag">&gt;&lt;img</span><span class="pln"> </span><span class="atn">src</span><span class="pun">=</span><span class="atv">"image.jpg"</span><span class="pln"> </span><span class="atn">alt</span><span class="pun">=</span><span class="atv">""</span><span class="tag">&gt;&lt;/div&gt;</span><span class="pln">
  </span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"actions"</span><span class="tag">&gt;</span><span class="pln">
    </span><span class="tag">&lt;h5&gt;</span><span class="pln">拖拽来剪切图片</span><span class="tag">&lt;/h5&gt;</span><span class="pln">
    </span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"btn btn-primary img-cutter-submit"</span><span class="tag">&gt;</span><span class="pln">确认</span><span class="tag">&lt;/button&gt;</span><span class="pln">
  </span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code></pre><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 通过Javascript初始化</span><span class="pln">
$</span><span class="pun">(</span><span class="str">'#imgCutter'</span><span class="pun">).</span><span class="pln">imgCutter</span><span class="pun">(</span><span class="pln">options</span><span class="pun">);</span></code></pre></article></section>



<section><header><h3>选项</h3></header><article><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>参数</th>
      <th>名称</th>
      <th>可选值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>coverColor</code></td>
      <td>遮罩层颜色</td>
      <td>表示颜色的字符串，默认为<code>"#000"</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>coverOpacity</code></td>
      <td>遮罩层透明度</td>
      <td>小于1的数字，默认为<code>0.6</code></td>
      <td></td>
    </tr>
    <tr>
      <td><code>defaultWidth</code></td>
      <td>默认图片宽度</td>
      <td>默认为<code>128</code></td>
    </tr>
    <tr>
      <td><code>defaultHeight</code></td>
      <td>默认图片高度</td>
      <td>默认为<code>128</code></td>
    </tr>
    <tr>
      <td><code>fixedRatio</code></td>
      <td>启用固定尺寸比例</td>
      <td><code>false</code>（默认）|<code>true</code></td>
      <td>如果启用固定尺寸比例，则用户在拖拽更改尺寸时会已初始比例进行同步缩放</td>
    </tr>
    <tr>
      <td><code>minWidth</code></td>
      <td>最小宽度</td>
      <td>默认为<code>48</code></td>
    </tr>
    <tr>
      <td><code>minHeight</code></td>
      <td>最小高度</td>
      <td>默认为<code>48</code></td>
    </tr>
    <tr>
      <td><code>post</code></td>
      <td>提交地址</td>
      <td>默认为<code>null</code></td>
      <td>当用户确认裁剪尺寸区域后会将尺寸区域数据通过POST请求提交到此地址</td>
    </tr>
    <tr>
      <td><code>get</code></td>
      <td>提交地址</td>
      <td>默认为<code>null</code></td>
      <td>当用户确认裁剪尺寸区域后会将尺寸区域数据通过GET请求提交到此地址</td>
    </tr>
  </tbody>
</table></div><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 使用选项</span><span class="pln">
$</span><span class="pun">(</span><span class="str">"#imgCutter"</span><span class="pun">).</span><span class="pln">imgCutter</span><span class="pun">({</span><span class="pln">
    fixedRatio</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pln">
</span><span class="pun">});</span></code></pre></article></section>









<section><header><h3>方法</h3></header><article><h4><span class="code">resetImage(img)</span></h4><p>该方法可以重新设置要剪切的图片。其中参数 <code>img</code> 为新的图片地址。</p><h4><span class="code">getData()</span></h4><p>获取当前图片剪切数据。该数据为一个对象，其属性定义如下：</p><div class="table-responsive"><table class="table table-bordered table-condensed">
  <thead>
    <tr><th>属性</th>
    <th>示例值</th>
    <th>说明</th>
  </tr></thead>
  <tbody>
    <tr>
      <th><code>originWidth</code></th>
      <td><code>800</code></td>
      <td>原始图片宽度</td>
    </tr>
    <tr>
      <th><code>originHeight</code></th>
      <td><code>533</code></td>
      <td>原始图片高度</td>
    </tr>
    <tr>
      <th><code>scaled</code></th>
      <td><code>false</code></td>
      <td>裁剪之前是否对原始图片进行了缩放</td>
    </tr>
    <tr>
      <th><code>scaleHeight</code></th>
      <td><code>533</code></td>
      <td>原始图片缩放后的高度</td>
    </tr>
    <tr>
      <th><code>scaleWidth</code></th>
      <td><code>800</code></td>
      <td>原始图片缩放后的宽度</td>
    </tr>
    <tr>
      <th><code>width</code></th>
      <td><code>128</code></td>
      <td>裁剪后的宽度</td>
    </tr>
    <tr>
      <th><code>height</code></th>
      <td><code>128</code></td>
      <td>裁剪后的高度</td>
    </tr>
    <tr>
      <th><code>left</code></th>
      <td><code>327</code></td>
      <td>裁剪位置距离左侧的距离</td>
    </tr>
    <tr>
      <th><code>right</code></th>
      <td><code>455</code></td>
      <td>裁剪位置距离右侧的距离</td>
    </tr>
    <tr>
      <th><code>top</code></th>
      <td><code>237</code></td>
      <td>裁剪位置距离上边的距离</td>
    </tr>
    <tr>
      <th><code>bottom</code></th>
      <td><code>365</code></td>
      <td>裁剪位置距离下边的距离</td>
    </tr>
  </tbody>
</table></div><h4>调用方法</h4><p>调用方法需要先获取插件实例。</p><pre class="prettyprint prettyprinted" style=""><code class="lang-js"><span class="com">// 获取 imgCutter 实例</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myImgCutter </span><span class="pun">=</span><span class="pln"> $</span><span class="pun">(</span><span class="str">'#imgCutter'</span><span class="pun">).</span><span class="pln">data</span><span class="pun">(</span><span class="str">'zui.imgCutter'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用 resetImg 方法</span><span class="pln">
myImgCutter</span><span class="pun">.</span><span class="pln">resetImage</span><span class="pun">(</span><span class="str">'http://zui.sexy/docs/img/img1.jpg'</span><span class="pun">);</span><span class="pln">

</span><span class="com">// 调用 getData 方法</span><span class="pln">
</span><span class="kwd">var</span><span class="pln"> myImgCutterData </span><span class="pun">=</span><span class="pln"> myImgCutter</span><span class="pun">.</span><span class="pln">getData</span><span class="pun">();</span></code></pre></article></section>




<script src="__ZUI__/lib/imgcutter/zui.imgcutter.js"></script>
<script src="__ZUI__/lib/bootbox/bootbox.min.js"></script>
<script>
function afterPageLoad() {
    var $imgCutterInfo = $('.img-cutter-info');
    $("#imgCutter").imgCutter({
        fixedRatio: true,
        before: function(e) {
            (window.bootbox || window).alert('<h3>准备提交的数据</h3><table class="table table-bordered table-condensed"><thead><th>属性</th><th>实际值</th><th>说明</th></thead><tbody><tr><th>originWidth</th><td>{originWidth}</td><td>原始图片宽度</td></tr><tr><th>originHeight</th><td>{originHeight}</td><td>原始图片高度</td></tr><tr><th>scaled</th><td>{scaled}</td><td>裁剪之前是否对原始图片进行了缩放</td></tr><tr><th>scaleHeight</th><td>{scaleHeight}</td><td>原始图片缩放后的高度</td></tr><tr><th>scaleWidth</th><td>{scaleWidth}</td><td>原始图片缩放后的宽度</td></tr><tr><th>width</th><td>{width}</td><td>裁剪后的宽度</td></tr><tr><th>height</th><td>{height}</td><td>裁剪后的高度</td></tr><tr><th>left</th><td>{left}</td><td>裁剪位置距离左侧的距离</td></tr><tr><th>right</th><td>{right}</td><td>裁剪位置距离右侧的距离</td></tr><tr><th>top</th><td>{top}</td><td>裁剪位置距离上边的距离</td></tr><tr><th>bottom</th><td>{bottom}</td><td>裁剪位置距离下边的距离</td></tr></tbody></table>'.format(e));
        },
        change: function(e) {
            $imgCutterInfo.text("宽度：{width}px，高度：{height}px，上边：{top}px，下边：{bottom}px，左边：{left}px，右边：{right}px".format(e));
        }
    });
}
</script><section><header><h3>事件</h3></header><article><div class="table-responsive"><table class="table table-bordered">
  <thead>
    <tr>
      <th>事件</th>
      <th>jquery事件名称</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>ready</code></td>
      <td>ready.zui.imgcutter</td>
      <td>当初始化之后时触发此事件</td>
    </tr>
    <tr>
      <td><code>change</code></td>
      <td>change.zui.imgcutter</td>
      <td>当用户更改所选择的区域时触发</td>
    </tr>
    <tr>
      <td><code>before</code></td>
      <td>before.zui.imgcutter</td>
      <td>当用户确认提交所选择的区域时触发，在该事件回调函数中返回<code>false</code>可以取消此次提交</td>
    </tr>
    <tr>
      <td><code>done</code></td>
      <td>done.zui.imgcutter</td>
      <td>当提交数据到服务器成功后触发</td>
    </tr>
    <tr>
      <td><code>fail</code></td>
      <td>fail.zui.imgcutter</td>
      <td>当提交数据到服务器失败后触发</td>
    </tr>
    <tr>
      <td><code>always</code></td>
      <td>always.zui.imgcutter</td>
      <td>当提交数据到服务器完成后触发</td>
    </tr>
  </tbody>
</table></div><p><link href="dist/lib/bootbox/bootbox.min.css" rel="stylesheet"></p><p><link rel="stylesheet" href="dist/lib/imgcutter/zui.imgcutter.css"></p></article></section></div>
</section>
{/block}